<template>
  <div>
    <div class="control-section">
      <div class="control-header">
        <span>导航</span>
        <span @click.stop="showBeautyBox = true" style="cursor: pointer"
          >组件美化</span
        >
      </div>
      <div class="control-body">
        <!-- 导航项默认颜色 -->
        <colorControl
          :color.sync="params.params.defaultColor"
          title="导航项默认颜色"
          @reset="resetItem('defaultColor')"
          @change="setDefaultColor"
        ></colorControl>
        <!-- 导航项选中颜色 -->
        <colorControl
          :color.sync="params.params.activeColor"
          title="导航项选中颜色"
          @reset="resetItem('activeColor')"
          @change="setActiveColor"
        ></colorControl>
        <!-- 添加导航项 -->
        <div class="control-item">
          <div class="control-title">添加导航项</div>
          <div class="control-content">
            <div class="nav-section">
              <div class="add-nav" @click="addNav">
                <div class="add-icon">
                  <i class="iconfont icon-jiahao"></i>
                </div>
                <div class="add-info">
                  <h4>添加导航项</h4>
                  <p>最佳尺寸：44*44px</p>
                </div>
              </div>
              <div class="nav-list" v-if="params.params.navList.length">
                <div
                  class="nav-item"
                  v-for="(item, index) in params.params.navList"
                  :key="index"
                  :class="item == currentNav ? 'active' : ''"
                  @click="handleNavItem(item, index)"
                  v-dragging="{
                    item: item,
                    list: params.params.navList,
                    group: 'footNavList',
                  }"
                >
                  <img
                    v-if="item.pic_url"
                    class="pic-url"
                    :src="item.pic_url"
                    alt=""
                  />
                  <span v-else>默认</span>
                  <div class="close-icon" @click.stop="deleteItem(index)">
                    x
                  </div>
                </div>
              </div>
              <div class="nav-group" v-if="currentNav">
                <div class="group-flex" @click="handleUploadDefault('default')">
                  <div
                    class="group-img"
                    @mouseenter="mouseenterDefault"
                    @mouseleave="mouseleaveDefault"
                  >
                    <img
                      v-if="currentNav.pic_url"
                      :src="currentNav.pic_url"
                      alt=""
                    />
                    <div
                      class="hover-cover"
                      v-if="showDefaultEditCover && currentNav.pic_url"
                    >
                      <i
                        class="iconfont icon-xianshi"
                        @click.stop="previewImg(currentNav.pic_url)"
                      ></i>
                      <i
                        class="iconfont icon-weibiaoti-1"
                        @click.stop="handleUploadDefault('default')"
                      ></i>
                      <div
                        class="close-icon"
                        @click.stop="deleteImg('default')"
                      >
                        x
                      </div>
                    </div>
                  </div>
                  <div class="group-label">默认</div>
                </div>
                <div class="group-flex" @click="handleUploadDefault('active')">
                  <div
                    class="group-img"
                    @mouseenter="mouseenterActive"
                    @mouseleave="mouseleaveActive"
                  >
                    <img
                      v-if="currentNav.active_url"
                      :src="currentNav.active_url"
                      @mouseenter="showEditCover = true"
                      @mouseleave="showEditCover = false"
                      alt=""
                    />
                    <div
                      class="hover-cover"
                      v-if="currentNav.active_url && showEditCover"
                    >
                      <i
                        class="iconfont icon-xianshi"
                        @click.stop="previewImg(currentNav.active_url)"
                      ></i>
                      <i
                        class="iconfont icon-weibiaoti-1"
                        @click.stop="handleUploadDefault('active')"
                      ></i>
                      <div class="close-icon" @click.stop="deleteImg('active')">
                        x
                      </div>
                    </div>
                  </div>
                  <div class="group-label">选中</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 导航名称 -->
        <div class="nav-name-input" v-if="currentNav">
          <a-input v-model="currentNav.nav_text" placeholder="请输入导航名称" />
        </div>
        <!-- 选择链接 -->
        <chooseLink
          v-if="currentNav"
          :link="currentLink"
          style="margin-top: 8px"
          @chooseEnd="setItemLink"
        ></chooseLink>
        <!-- 控制是否显示 -->
        <div class="switch-item">
          <span>是否展示</span>
          <a-switch v-model="params.is_show" />
        </div>
      </div>
    </div>
    <!-- 组件美化 -->
    <comBeautyBox
      :showBeautyBox="showBeautyBox"
      @handleBack="showBeautyBox = false"
    >
      <div>
        <!-- 背景配置 -->
        <bgControl :backgroudData="params.moduleCss"></bgControl>
      </div>
    </comBeautyBox>

    <!-- 图片预览组件 -->
    <previewImg
      :previewSrc="previewSrc"
      :hidden.sync="showPreviewImg"
      @close="showPreviewImg = false"
    ></previewImg>

    <storage-select
      :hiddenInput="true"
      ref="editBackground"
      @onOk="afterUpload"
    ></storage-select>
  </div>
</template>

<script>
import { widgetNav } from "@/components/DiyNew/diy/dataConfig/config.js";
import colorControl from "@/components/DiyNew/diy/baseControl/colorControl/index.vue";
import SelectLink from "@/components/DiyNew/SelectLink/index.vue";
import previewImg from "@/components/DiyNew/previewImg/index.vue";

import bgControl from "@/components/DiyNew/diy/baseControl/bgControl/index.vue";
import chooseLink from "@/components/DiyNew/chooseLink/index.vue";
import comBeautyBox from "@/components/DiyNew/diy/comBeautyBox/comBeautyBox.vue";

export default {
  name: "widgetNavControl",
  components: {
    colorControl,
    bgControl,
    chooseLink,
    SelectLink,
    previewImg,
    comBeautyBox,
  },
  props: {
    params: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      showBeautyBox: false,
      currentNav: null,
      navIndex: -1,
      previewSrc: "",
      showPreviewImg: false,
      unloadType: "",
      showEditCover: false,
      showDefaultEditCover: false,
      currentLink: {},
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 设置默认颜色
    setDefaultColor(e) {
      this.$set(this.params.params, "defaultColor", e);
    },
    // 设置选中颜色
    setActiveColor(e) {
      this.$set(this.params.params, "activeColor", e);
    },
    // 重置选项
    resetItem(key) {
      console.log("重置数据", key);
      let data = Object.assign({}, widgetNav);
      this.$set(this.params.params, key, data.params.key);
    },
    // 添加导航项
    addNav() {
      let arr = this.params.params.navList;
      if (arr.length > 5) return;
      let obj = {
        pic_url: "",
        active_url: "",
        nav_text: "",
        link: {},
      };
      arr.push(obj);
      this.$set(this.params.params, "navList", arr);
    },
    // 点击导航某一项
    handleNavItem(item, index) {
      this.navIndex = index;
      this.currentLink = item.link || {};
      this.currentNav = item;
      console.log(this.currentLink);
    },
    handleUploadDefault(type) {
      this.unloadType = type;
      this.$refs.editBackground.onClickUploadBtn();
    },
    // 上传回调
    afterUpload(e) {
      console.log("afterUpload", e);
      this.params.params.navList.forEach((d, index) => {
        if (index == this.navIndex) {
          if (this.unloadType == "active") {
            d.active_url = e;
          } else {
            d.pic_url = e;
          }
        }
      });
      this.currentNav = this.params.params.navList[this.navIndex];
      console.log(this.currentNav);
    },
    // 预览图片
    previewImg(src) {
      this.showPreviewImg = true;
      this.previewSrc = src;
    },
    // 删除图片
    deleteImg(type) {
      this.params.params.navList.forEach((d, index) => {
        if (index == this.navIndex) {
          if (type == "active") {
            d.active_url = "";
          } else {
            d.pic_url = "";
          }
        }
      });
    },
    // 删除导航
    deleteItem(index) {
      this.params.params.navList.splice(index, 1);
      this.currentNav = null;
      this.navIndex = -1;
    },
    // 链接选择回调
    setItemLink(e) {
      console.log(e);
      this.params.params.navList.forEach((d, index) => {
        if (index == this.navIndex) {
          d.link = e;
        }
      });
      this.currentLink = this.params.params.navList[this.navIndex].link;
      this.currentNav = this.params.params.navList[this.navIndex];
      console.log(this.currentNav);
    },
    mouseenterDefault() {
      if (this.showDefaultEditCover || !this.currentNav) return;
      this.showDefaultEditCover = true;
    },
    mouseleaveDefault() {
      if (!this.showDefaultEditCover || !this.currentNav) return;
      this.showDefaultEditCover = false;
    },
    mouseenterActive() {
      if (this.showEditCover || !this.currentNav) return;
      this.showEditCover = true;
    },
    mouseleaveActive() {
      if (!this.showEditCover || !this.currentNav) return;
      this.showEditCover = false;
    },
  },
  mounted() {
    this.$eventHub.$on("widgetFootNavChange", (e) => {
      console.log('监听到了啥，导航？',e)
      this.handleNavItem(e.nav, e.i);
    });
  },
};
</script>

<style lang="scss" scoped>
.control-section {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  .control-header {
    width: 100%;
    height: 48px;
    background: #ffffff;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    span:first-child {
      font-weight: 600;
      color: #000000;
    }
    span:last-child {
      font-size: 12px;
      color: #8c8c8c;
    }
  }
  .control-body {
    width: 228px;
    margin: 0 auto;
    .switch-item {
      width: 228px;
      height: 40px;
      background: #f6f7f9;
      border-radius: 4px;
      margin-top: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;
    }
  }
  .control-item {
    width: 100%;
    .control-title {
      padding: 24px 0 12px 0;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 17px;
      color: #000000;
      text-align: left;
    }
    .nav-section {
      width: 228px;
      min-height: 72px;
      background: #f6f7f9;
      border-radius: 4px;
      padding-bottom: 2px;
      .add-nav {
        width: 100%;
        height: 72px;
        border-radius: 4px 4px 0 0;
        display: flex;
        align-items: center;
        padding-left: 14px;
        .add-icon {
          width: 44px;
          height: 44px;
          background: #ffffff;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          .iconfont {
            font-size: 26px;
          }
        }
        .add-info {
          margin-left: 14px;
          text-align: left;
          h4 {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 600;
            line-height: 20px;
            color: #000000;
            margin-bottom: 0;
          }
          p {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 17px;
            color: #000000;
            opacity: 0.45;
            margin-bottom: 0;
          }
        }
      }
      .nav-list {
        width: 224px;
        margin: 0 auto;
        min-height: 68px;
        background: #ffffff;
        border-radius: 4px;
        padding: 8px;
        display: flex;
        flex-wrap: wrap;
        .nav-item {
          width: 44px;
          height: 44px;
          background: #ffffff;
          border: 2px solid rgba(112, 112, 112, 0.05);
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          margin: 4px;
          span {
            font-size: 12px;
          }
          .pic-url {
            width: 100%;
            height: 100%;
            border-radius: 4px;
          }
          .close-icon {
            width: 14px;
            height: 14px;
            background: #ff5414;
            border-radius: 50%;
            display: none;
            justify-content: center;
            align-items: center;
            position: absolute;
            right: -7px;
            top: -7px;
            z-index: 12;
            color: #ffffff;
            font-size: 12px;
            cursor: pointer;
          }
        }
        .nav-item:hover > .close-icon {
          display: flex;
        }
        .active {
          border: 2px solid #1890fc;
        }
      }
      .nav-group {
        width: 224px;
        height: 68px;
        background: #ffffff;
        border-radius: 4px;
        margin: 2px auto 0;
        padding: 12px;
        display: flex;
        align-items: center;
        .group-flex {
          width: 50%;
          height: 100%;
          display: flex;
          align-items: center;
          .group-img {
            width: 44px;
            height: 44px;
            background: #ffffff;
            border: 2px solid rgba(112, 112, 112, 0.05);
            border-radius: 4px;
            position: relative;
            img {
              width: 100%;
              height: 100%;
              border-radius: 4px;
            }
            .hover-cover {
              width: 44px;
              height: 44px;
              background: rgba(0, 0, 0, 0.5);
              border: 2px solid #1890fc;
              border-radius: 4px;
              position: absolute;
              left: -1px;
              top: -1px;
              z-index: 11;
              justify-content: center;
              align-items: center;
              display: flex;
              transition: all 0.2s;
              .iconfont {
                color: #ffffff;
                font-size: 15px;
                cursor: pointer;
              }
              .icon-xianshi {
                margin-right: 5px;
              }
              .close-icon {
                width: 14px;
                height: 14px;
                background: #ff5414;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                right: -7px;
                top: -7px;
                z-index: 12;
                color: #ffffff;
                font-size: 12px;
                cursor: pointer;
              }
            }
          }
          .group-label {
            margin-left: 8px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #000000;
            opacity: 0.45;
          }
        }
        .group-flex:last-child {
          margin-left: 6px;
        }
      }
    }
  }
  .nav-name-input {
    width: 100%;
    height: 40px;
    border-radius: 4px;
    margin-top: 8px;
    ::v-deep .ant-input {
      width: 100%;
      height: 100%;
      border: 0 none;
      background: #f6f7f9;
    }
  }
}
</style>
